{include file="public/header" /}
<link rel="stylesheet" type="text/css" href="/static/admin/webupload/webuploader.css">
<link rel="stylesheet" type="text/css" href="/static/admin/webupload/style.css">
<link href="/static/admin/css/select2.min.css" rel="stylesheet">
<style>
    .file-item{float: left; position: relative; width: 110px;height: 110px; margin: 0 20px 20px 0; padding: 4px;}
    .file-item .info{overflow: hidden;}
    .uploader-list{width: 100%; overflow: hidden;}
</style>
<body class="gray-bg">

<div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
    <form id="signupForm" method="post" action="">
        <div class="modal-content animated bounceInRight">
            <div class="modal-header">
                <h4 class="modal-title">上传图片</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">

                    <label for="">场景名称</label>
                    <input type="text" name="title" class="form-control">

                    <label for="">场景描述</label>
                    <input type="text" name="remark" class="form-control">

                    <label for="">上传图片</label>
                    <input type="file" name="file">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button type="submit" class="btn btn-primary">保存</button>
            </div>
        </div>
        </form>
    </div>
</div>

<div class="modal inmodal" id="editSceneModel" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
    <form id="signupFormTwo" method="post" action="">
        <input type="hidden" name="id" id="editSceneId">
        <div class="modal-content animated bounceInRight">
            <div class="modal-header">
                <h4 class="modal-title">修改场景</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">

                    <label for="">场景名称</label>
                    <input type="text" name="title" id="editSceneTitle" class="form-control">

                    <label for="">场景描述</label>
                    <input type="text" name="remark" id="editSceneRemark" class="form-control">

                    <label for="">上传图片</label>
                    <input type="file" name="file">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button type="submit" class="btn btn-primary">保存</button>
            </div>
        </div>
        </form>
    </div>
</div>

    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <div class="file-manager">
                            <div class="col-sm-6">
                                <button class="btn btn-success" type="button" data-toggle="modal" data-target="#myModal">
                                    <i class="fa fa-upload"></i>&nbsp;&nbsp;<span class="bold">上传</span>
                                </button>
                            </div>
                            <a onclick="order()" id="btnorder" class="btn btn-info">更新排序</a>
                            <a onclick="updateCache()" class="btn btn-info">更新缓存</a>
                            <div class="hr-line-dashed"></div>
                            <h5>分类</h5>
                            <ul class="folder-list" style="padding: 0">
                                <li><a href="{:url('scene/index')}"><i class="fa fa-folder-open"></i> 场景</a>
                                </li>
                                <li><a href="{:url('facade/index')}"><i class="fa fa-folder"></i> 门面</a>
                                </li>
                                <li><a href="{:url('figure/index')}"><i class="fa fa-folder"></i> 人物</a>
                                </li>
                                <li><a href="{:url('element/index')}"><i class="fa fa-folder"></i> 元素</a>
                                </li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-9 animated fadeInRight">
                <div class="row">
                    <div class="col-sm-12">
                        <form id="ruleorder" name="ruleorder" method="post" action="{:url('order')}" >
                        <div class="layer-photos-demo">
                            {foreach $list as $vo}
                                <div class="file-box">
                                    <div class="file">
                                        <span class="corner"></span>

                                        <div class="image">
                                            <img alt="image" class="img-responsive" src="{$vo.icon_path}">
                                        </div>
                                        <div class="file-name">
                                            <div class="col-sm-8">
                                                <input type="number" class="form-control" name="{$vo.id}" value="{$vo.sort}">
                                            </div>
                                            <a onclick="remove('{$vo.id}')" class="btn btn-white btn-bitbucket">
                                                <i class="fa fa-times"></i>
                                            </a>
                                            <center>
                                                <a href="{:url('sceneItem/index', ['scene_id'=>$vo.id])}" class="btn btn-white btn-bitbucket">
                                                    <i class="fa fa-info-circle"></i>
                                                </a>
                                                <a href="javascript:;" onclick="editScene('{$vo.id}')" class="btn btn-white btn-bitbucket">
                                                    <i class="fa fa-edit"></i>
                                                </a>
                                            </center>
                                        </div>
                                    </div>
                                </div>
                            {/foreach}
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
{include file="public/footer" /}
<script type="text/javascript" src="/static/admin/webupload/webuploader.min.js"></script>
<script src="/static/admin/js/select2.full.min.js"></script>
<script type="text/javascript">

layer.photos({
  photos: '.layer-photos-demo'
 ,anim: false //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
});

function remove(id) {
    layer.confirm('确认删除吗', {icon: 3}, function(index){
        layer.close(index);
        window.location.href = "{:url('delete')}?id=" + id;
    });
}

function editScene(sceneId) {
    $.ajax({
        url: "{:url('sceneInfo')}",
        type: "post",
        data: {
            scene_id: sceneId
        },
        dataType: "json",
        success:function(data) {

            if (data.code != 1) {
                layer.msg(data.msg);
                return false;
            }

            $("#editSceneTitle").val(data.data.title);
            $("#editSceneRemark").val(data.data.remark);
            $("#editSceneId").val(data.data.id);

            $("#editSceneModel").modal("show");
        },
    });
}

// 更新缓存
function updateCache() {
    layer.confirm('确认更新缓存吗', {icon: 3}, function(index){
        layer.close(index);
        // 显示loading
        index2 = layer.load(0, {
            shade: [0.3,'#fff']
        });

        $.ajax({
            url: "{:url('updateCache')}",
            type: "post",
            data: {},
            dataType: "json",
            success:function(data) {

                if (data.code != 1) {
                    layer.msg(data.msg);
                    return false;
                }

                layer.msg(data.msg,{icon:1,time:1000,shade: 0.1,}, function(index){
                    window.location.href="{:url('index')}"
                });
            },
            complete:function() {
                // 隐藏loading
                layer.close(index2);
            }
        });
    });
}

  function order() {
    $('#ruleorder').ajaxSubmit({
      url: '{:url("order")}',
      type: 'POST',
        beforeSend:function() {
            // 显示loading
            index2 = layer.load(0, {
                shade: [0.3,'#fff']
            });
            $("#formSubmit").attr('type', 'button')
        },
        success: function(data){

            if (data['code'] != 1) {
                layer.msg(data.msg,{icon:2,time:1000,shade: 0.1,}, function(index){
                    layer.close(index)
                });
                $("#formSubmit").attr('type', 'submit')
                return false;
            }

            layer.msg(data.msg,{icon:1,time:1000,shade: 0.1,}, function(index){
                window.location.href="{:url('index')}"
            });
        },
        error: function(XmlHttpRequest, textStatus, errorThrown){
            layer.msg('error!',{icon:1,time:1000});
        },
        complete:function() {
            // 隐藏loading
            layer.close(index2);
        }
    });
  }

  //以下为官方示例
  $().ready(function () {

      // validate signup form on keyup and submit
      var icon = "<i class='fa fa-times-circle'></i> ";
      $("#signupFormTwo").validate({
          rules: {
              title: {
                  required: true,
              },
              remark: {
                  required: true
              },
              file: {
                  required: true
              }
          },
          focusCleanup:true,
          submitHandler:function(form){

              $(form).ajaxSubmit({
                  type: 'post',
                  url: "{:url('editScene')}",
                  beforeSend:function() {
                      // 显示loading
                      index2 = layer.load(0, {
                          shade: [0.3,'#fff']
                      });
                      $("#formSubmit").attr('type', 'button')
                  },
                  success: function(data){

                      if (data['code'] != 1) {
                          layer.msg(data.msg,{icon:2,time:1000,shade: 0.1,}, function(index){
                              layer.close(index)
                          });
                          $("#formSubmit").attr('type', 'submit')
                          return false;
                      }

                      layer.msg(data.msg,{icon:1,time:1000,shade: 0.1,}, function(index){
                          window.location.reload();
                      });
                  },
                  error: function(XmlHttpRequest, textStatus, errorThrown){
                      layer.msg('error!',{icon:1,time:1000});
                  },
                  complete:function() {
                      // 隐藏loading
                      layer.close(index2);
                  }
              });
          }
      });


  });

  //以下为官方示例
  $().ready(function () {

      // validate signup form on keyup and submit
      var icon = "<i class='fa fa-times-circle'></i> ";
      $("#signupForm").validate({
          rules: {
              title: {
                  required: true,
              },
              remark: {
                  required: true
              },
              file: {
                  required: true
              }
          },
          focusCleanup:true,
          submitHandler:function(form){

              $(form).ajaxSubmit({
                  type: 'post',
                  url: "{:url('addScene')}",
                  beforeSend:function() {
                      // 显示loading
                      index2 = layer.load(0, {
                          shade: [0.3,'#fff']
                      });
                      $("#formSubmit").attr('type', 'button')
                  },
                  success: function(data){

                      if (data['code'] != 1) {
                          layer.msg(data.msg,{icon:2,time:1000,shade: 0.1,}, function(index){
                              layer.close(index)
                          });
                          $("#formSubmit").attr('type', 'submit')
                          return false;
                      }

                      layer.msg(data.msg,{icon:1,time:1000,shade: 0.1,}, function(index){
                          window.location.reload();
                      });
                  },
                  error: function(XmlHttpRequest, textStatus, errorThrown){
                      layer.msg('error!',{icon:1,time:1000});
                  },
                  complete:function() {
                      // 隐藏loading
                      layer.close(index2);
                  }
              });
          }
      });


  });
</script>
</body>
</html>